<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="谷歌验证码" width="50%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
    <div class="border-box">
      <el-form ref="emailForm" :model="formParams" :rules="ruleForm" label-position="right" label-width="0">
        <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
          <div class="title width25">
            {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
          </div>
          <div class="content width80">
            <el-form-item class="item-clear" v-show="item.key=='types'" label="" prop="types">
              <el-select v-model="formParams.types" placeholder="请选择类型" filterable @change="getGoogle">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in typeData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='user_id'" label="" prop="user_id">
              <el-select v-model="formParams.user_id" placeholder="请选择用户" filterable class="marginR20" @change="getGoogle">
                <el-option :label="item.nick_name" :value="item.id" v-for="(item, index) in qrCodeUserData" :key="index"></el-option>
              </el-select>
              <!-- <el-button type="danger" size="mini" @click="getGoogle">二维码</el-button> -->
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='qrCode'" label="" prop="qrCode" style="height:auto">
              <vue-qr :text="formParams.google_url" color-dark="#000" :size="140" />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='google_url'" label="" prop="google_url" >
              <el-input v-model="formParams.google_url" type="text" readonly/>
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='google_secret'" label="" prop="google_secret" >
              <el-input v-model="formParams.google_secret" type="text" readonly />
            </el-form-item>
            <el-form-item class="item-clear" v-show="item.key=='google_code'" label="" prop="google_code" >
              <el-input v-model="formParams.google_code" type="text" placeholder="请输入谷歌验证码"/>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleClose">取 消</el-button>
      <el-button size="medium" type="primary" @click="handleConfirm('emailForm')">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addQrCode,
  editQrCode,
  qrCodeUser
} from "@/api/config";
import VueQr from 'vue-qr'
import { googleKey } from '@/api/user'
export default {
  components: {
    VueQr
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
    typeData: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      isShow: false,
      itemData:[
        { label: '类型', key: 'types' ,pass:true},
        { label: '用户ID', key: 'user_id' ,pass:true},
        { label: '谷歌二维码', key: 'qrCode' },
        { label: '谷歌Url', key: 'google_url' },
        { label: '谷歌秘钥', key: 'google_secret' },
        { label: '验证码', key: 'google_code' ,pass:true},
      ],
      qrCodeUserData:[],
      formParams: {
        types: 2, //是资源发放,2是提现审核,3是kol审核,4邮件公告
        user_id:'',
        google_secret: '',
        google_url: '',
        google_code: '',
      },
      ruleForm: {
        types: [{ required: true, trigger: 'blur', message: '请选择谷歌验证码类型', }],
        user_id: [{ required: true, trigger: 'blur', message: '请选择用户ID', }],
        google_code: [{ required: true, trigger: 'blur', message: '请输入谷歌验证码', }],
      },
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {
          types: 2,
          user_id:'',
          google_secret: '',
          google_url: '',
          google_code: '',
        }
      }
    },
  },
  mounted () {
    this.getQrCodeUser()
  },
  methods: {
    // 确认
    handleConfirm (formvalue) {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams));
      if(!params.google_secret){
        return that.$message.error('请生成谷歌二维码')
      }
      that.$refs[formvalue].validate((valid) => {
        if (valid) {
          if (!params.id) {
            addQrCode(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          } else {
            editQrCode(params).then(function (res) {
              that.$message.success(res.msg)
              that.$emit('onHideDetails', true)
            }).catch((error) => {
              that.$message.error(error.msg)
            })
          }
        } else {
          return false;
        }
      });
    },
    // 查询后台用户
    getQrCodeUser(){
      let that = this;
      that.qrCodeUserData = []
      qrCodeUser({}).then(res => {
        if (res.code == 1) {
          that.qrCodeUserData = res.data
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 谷歌验证码
    getGoogle() {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams)),
      name=that.typeLabel(params.types)+params.user_id;
      if(!params.user_id){
        return that.$message.error('请选择用户')
      }
      googleKey({user_name: name}).then(function (res) {
        if (res.code === 1) {
          that.formParams.google_url = res.data.googleUrl
          that.formParams.google_secret = res.data.secret
        }
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 类型
    typeLabel(cellValue){
      return (this.typeData.find((item) => item.value === cellValue)?.text || "-");
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
</style>
